<template>
  <el-dialog :visible="visible" @close="close" width="600px" title="优惠券列表" :append-to-body="true">
    <div slot="title">
      <h3>优惠券列表</h3>
      <p style="font-size: 12px; margin: 10px 0 0 0;">*只支持领取方式为【平台推送】的优惠券</p>
    </div>
    <el-table :data="coupons" height="300px" @row-click="handleRowClick">
      <el-table-column  prop="name" label="优惠券名称" width="200">
        <template slot-scope="scope">
          <el-radio v-model="selected" :label="scope.row.id">{{ scope.row.name }}</el-radio>
        </template>
        </el-table-column>
      <el-table-column label="面值" >
        <template slot-scope="scope">
          ￥{{scope.row.amount|formatMoney}}
        </template>
      </el-table-column>
      <el-table-column label="描述" min-width="180" prop="describe" show-overflow-tooltip />
      <div class="empty__text" slot="empty" style="line-height: 1.2;">
        未发现可用的券
        <el-link type="primary" @click="handleToCoupon">去新增优惠券</el-link>
      </div>
    </el-table>
    <div class="" slot="footer">
      <el-button size="small" @click="close">取 消</el-button>
      <el-button size="small" type="primary" @click="confirm">确 定</el-button>
    </div>
    <auth-code ref="AuthCode" :visible.sync="openAuth" :title="authTitle" :authObj="authObj" @submit="submitAuthCode" />
  </el-dialog>
</template>
<script>
import { getCouponList } from '@/api/coupon'
import AuthCode from '@/components/auth-code'
import { formatMoney } from '@/utils'
import { providerCouponApi } from '@/api/member/product'
import { mapGetters } from 'vuex'

export default {
  name: '',
  props: {

  },
  components: {
    AuthCode
  },
  data: () => ({
    visible: false,
    clientUser: {},
    coupons: [],
    selected: null,
    authTitle: '',
    authObj: {},
    openAuth: false
  }),
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList'])
  },
  methods: {
    async open (item) {
      this.visible = true
      this.clientUser = item
      await this.getCoupons()
    },
    close () {
      this.visible = false
      this.reset()
    },
    reset () {
      this.clientUser = {}
      this.selected = null
      this.openAuth = false
    },
    async getCoupons () {
      const params = { page_size: 100, status: 1, draw_method: 'internal' }
      const data = await getCouponList(params)
      this.coupons = data?.data?.list || []
    },
    handleRowClick (row) {
      this.selected = row.id
    },
    confirm () {
      if (!this.selected && this.coupons.length === 0) {
        this.close()
        return
      }
      if (!this.selected) {
        this.$message.warning('请选择优惠券')
        return
      }
      const userId = this.clientUser.user_id
      const selectdCoupon = this.coupons.find(item => item.id === this.selected)
      this.authTitle = `确定给用户${userId}发放【${formatMoney(selectdCoupon.amount)}元】优惠券吗？验证码通过验证后才可操作`
      const project = this.permission_projectList.filter(v => selectdCoupon.app_id.includes(v.app_id))
      this.authObj = {
        type: 'provider_coupon',
        data: {
          user_id: userId,
          name: selectdCoupon.name,
          amount: `${formatMoney(selectdCoupon.amount)}元`,
          id: selectdCoupon.id,
          project: project.map(v => v.name).join(',')
        }
      }
      this.openAuth = true
    },
    async submitAuthCode (codeObj) {
      const user_id = this.clientUser.user_id
      const selectdCoupon = this.coupons.find(item => item.id === this.selected)
      const params = { user_id, id: selectdCoupon.id }
      const data = await providerCouponApi(params, codeObj).catch(err => ({ err: err.message }))
      this.$refs.AuthCode.cancelLoading()
      if (data?.err) {
        return
      }
      if (data?.data?.sub_code === 'ok') {
        this.$message.success('发放成功')
        this.close()
        return
      }
      this.$message.error(data?.data?.sub_msg || '发放失败')
    },
    handleToCoupon () {
      this.close()
      this.$router.push({
        path: '/coupon/list',
        query: this.$route.query
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
